<template>
    <div class="app-container">
        <el-dialog :title="title" :visible="openJq" :before-close="canceljq" width="1100px" destroy-on-close append-to-body>
            <el-form ref="formjq" :model="formjq" :rules="rules" label-width="120px">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="carNo">
                            <el-input placeholder="请选择车辆" v-model="formjq.carNo" :readOnly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车架号" prop="vinNo">
                            <el-input placeholder="请选择车辆" :readOnly="true" v-model="formjq.vinNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车辆信息" prop="carInfo">
                            <el-input placeholder="请选择车辆" :readOnly="true" v-model="formjq.carInfo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交强险保险公司" prop="compulsoryCompany">
                            <el-select v-model="formjq.compulsoryCompany" @change="jqCompany">
                                <template v-for="item in jqList">
                                    <el-option :label="item.companyName" :value="item.companyNo" :key="item.companyNo"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交强险保单号" prop="compulsoryNo">
                            <el-input placeholder="请输入" v-model="formjq.compulsoryNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="交强险时间" prop="compulsoryTime">
                            <el-date-picker v-model="formjq.compulsoryTime" type="daterange" value-formjqat="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交强险保险费用" prop="compulsoryAmount">
                            <el-input placeholder="请输入" v-model="formjq.compulsoryAmount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="交强险备注" prop="compulsoryRemark">
                            <el-input placeholder="请输入" type="textarea" v-model="formjq.compulsoryRemark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="交强险附件" prop="urlList">
                            <ImageUpload isArray v-model="formjq.urlList" :limit="3" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitJqform" :loading="loadingBtn">确 定</el-button>
                <el-button @click="canceljq">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listInsurance, getInsurance, delInsurance, addInsurance, addSyInsurance, addJqInsurance, updateInsurance, exportInsurance, carBasicList, insuranceCompanyList } from "@/api/maintenance/insurance";

export default {
    name: "MmvSy",
    dicts: ['insuranceType'],
    props: {
        carId: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        openJq: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            loadingBtn: false,
            carBasicformjq: false,
            showJiaoqiang: false, // 显示选择交强险公司
            carBasicList: [],
            totalcarBasic: 0,
            loading: true,
            xianzhong: {},
            insuranceName: null,
            formjq: {
                carNo: '', // 车牌号
                vinNo: '', // 车架号
                carInfo: '', // 车辆信息
                id: '', // 交强险id
                compulsoryCompany: {}, // 交强险保险公司
                compulsoryNo: '', // 交强险保单号
                compulsoryTime: [], // 交强险时间
                compulsoryAmount: '', // 交强险保险费用
                commercialTotalAmount: '', // 交强险合计费用
                compulsoryRemark: '', // 交强险备注
                urlList: [], // 交强险附件
            },
            rules: {
                carNo: [{ required: true, message: "必填", trigger: 'blur' }],
                sycompulsoryCompany: [{ required: true, message: "必填", trigger: 'blur' }],
                sycompulsoryNo: [{ required: true, message: "必填", trigger: 'blur' }],
                sycompulsoryTime: [{ required: true, message: "必填", trigger: 'blur' }],
                syUrlList: [{ required: true, message: "必填", trigger: 'blur' }],
                xianzhong: [{ required: true, message: "必填", trigger: 'blur' }],
                jqcompulsoryCompany: [{ required: true, message: "必填", trigger: 'blur' }],
                jqcompulsoryNo: [{ required: true, message: "必填", trigger: 'blur', trigger: 'blur' }],
                jqcompulsoryTime: [{ required: true, message: "必填", trigger: 'blur' }],
                jqcompulsoryAmount: [{ required: true, message: "必填", trigger: 'blur' }],
                jqUrlList: [{ required: true, message: "必填", trigger: 'blur' }],
                compulsoryCompany: [{ required: true, message: "保险公司必填", trigger: 'blur' }],
                compulsoryNo: [{ required: true, message: "保单号必填", trigger: 'blur' }],
                compulsoryTime: [{ required: true, message: "时间必填", trigger: 'blur' }],
                compulsoryAmount: [{ required: true, message: "费用必填", trigger: 'focus' }],
                // urlList: [{ required: true, message: "必填", trigger:'focus' }],
                carNo: [{ required: true, message: "车牌号必填" }],
                sycompulsoryCompany: [{ required: true, message: "商业险保险公司必填" }],
                sycompulsoryNo: [{ required: true, message: "商业险保单号必填", trigger: 'blur' }],
                sycompulsoryTime: [{ required: true, message: "商业险时间必填" }],
                syUrlList: [{ required: true, message: "商业险附件必填" }],
                xianzhong: [{ required: true, message: "险种必填" }],
                jqcompulsoryCompany: [{ required: true, message: "交强险保险公司必填" }],
                jqcompulsoryNo: [{ required: true, message: "交强险保单号必填" }],
                jqcompulsoryTime: [{ required: true, message: "交强险时间必填" }],
                jqcompulsoryAmount: [{ required: true, message: "交强险合计费用必填" }],
                jqUrlList: [{ required: true, message: "交强险附件必填" }],
            },
            jqList: [], // 交强险保险公司
            carParams: {
                carNo: null,
                pageNum: 1,
                pageSize: 10,
            }
        };
    },
    computed: {
        formjqData() {
            const formjqData = {
                carId: this.formjq.carId, // 车辆ID
                carNo: this.formjq.carNo, // 车牌号
                vinNo: this.formjq.vinNo, // 车架号
                carInfo: this.formjq.carInfo, // 车辆信息
                compulsoryCompanyId: this.formjq.compulsoryCompanyId,
                compulsoryCompany: this.formjq.compulsoryCompany,
                compulsoryNo: this.formjq.compulsoryNo, // 交强险保单号
                compulsoryStartTime: this.formjq.compulsoryTime[0], // 交强险开始时间
                compulsoryEndTime: this.formjq.compulsoryTime[1], // 交强险结束时间
                compulsoryAmount: parseFloat(this.formjq.compulsoryAmount), // 交强险保险费用
                commercialTotalAmount: parseFloat(this.formjq.compulsoryAmount), // 交强险合计费用
                compulsoryRemark: this.formjq.compulsoryRemark, // 交强险备注
                urlList: this.formjq.urlList, // 交强险附件
            };
            return formjqData;
        },
    },
    watch: {
        carId: {
            immediate: true,
            handler(val) {
                if (this.carId) {
                    this.getDetail(this.carId);
                }
            }
        }
    },
    mounted() {
        this.jqxList()
        this.formjq.compulsoryCompanyId = null
        this.formjq.compulsoryCompany = null
    },
    methods: {
        //交强险
        jqxList() {
            insuranceCompanyList(1).then(response => {
                this.jqList = response.data;
            })
        },
        canceljq() {
            this.$emit("close")
        },
        jqCompany(val) {
            console.info(val)
            this.formjq.compulsoryCompanyId = val
            this.syList.map(item => {
                if (val == item.companyNo) {
                    this.formjq.compulsoryCompany = item.companyName
                }
            })
        },
        carRhandleQuery() {
            this.carParams.pageNum = 1;
            this.carNoClick(this.carParams);
        },
        carResetQuery() {
            this.resetformjq("carParam");
            this.carRhandleQuery();
        },
        selectCar(data) {

            this.carBasicformjq = false
            this.formjq.carId = data.carId;
            this.formjq.carNo = data.carNo;
            this.formjq.vinNo = data.vinNo;
            this.formjq.carInfo = data.carInfo;
        },
        emitData() {
            return this.formjqData;
        },
        async submitJqform() {
            this.loadingBtn = true;
            setTimeout(() => {
                this.loadingBtn = false;
            }, 2e3);
            this.$refs["formjq"]?.validate(valid => {
                if (valid) {
                    this.formjq.compulsoryStartTime = this.formjq.compulsoryTime[0], // 商业险开始时间
                        this.formjq.compulsoryEndTime = this.formjq.compulsoryTime[1], // 商业险结束时间
                        this.formjq.commercialTotalAmount = parseFloat(this.formjq.compulsoryAmount), // 商业险保险费用
                        addJqInsurance(this.formjq).then(response => {
                            this.$modal.msgSuccess("交强险续保成功");
                            this.$emit("close")
                        });
                }
            });
        },
        async getDetail(carId) {
            const result = await getInsurance(carId);
            const data = result.data;
            this.formjq = Object.assign(this.formjq, result.data)
            this.formjq.carNo = data.carNo;// 车牌号
            this.formjq.vinNo = data.vinNo;// 车架号
            this.formjq.carInfo = data.carInfo;// 车辆信息
            this.formjq.id = null;
            this.formjq.compulsoryCompanyId = null // 商业险保险公司编号
            this.formjq.compulsoryCompany = null // 商业险保险公司名称
            this.formjq.compulsoryNo = null// 商业险保单号
            this.formjq.compulsoryTime = []// 商业险时间
            this.formjq.compulsoryAmount = null// 商业险保险费用
            this.formjq.commercialTotalAmount = null// 商业险合计费用
            this.formjq.compulsoryRemark = null// 商业险备注
            this.formjq.urlList = [];// 商业险附件
        },
    },
}
</script>
